<template>
  <div class="TaskComment">
    <n-spin :show="state.loadingFlag">
      <n-scrollbar style="height: 600px">
        <div v-if="state.list.length" class="comment-list mr-20 flex-col gap-10">
          <div
            v-for="(item, index) in state.list"
            :key="index"
            class="comment-item rounded-4 bg-#f5f6fb p-10"
          >
            <MyInfo :src="item.avatar" :text="item.updateUserName">
              <template #after>
                <div class="ml-20">{{ item.updateTime }}</div>
              </template>
            </MyInfo>
            <div class="mt-10 bg-#FFF p-10">{{ item.comment }}</div>
          </div>
        </div>
        <div
          v-if="state.list.length === 0 && !state.loadingFlag"
          class="mt-200 flex-col items-center"
        >
          <img src="@/assets/no-data.png" class="w-100" />
          <div class="font-size-14 color-#9BA3B2">暂无内容</div>
        </div>
      </n-scrollbar>
    </n-spin>
    <div>
      <n-form
        ref="$form"
        :model="model"
        label-placement="left"
        label-align="right"
        require-mark-placement="left"
        class="mt-10"
      >
        <n-form-item path="comment" :rule="[{ required: true, message: '请输入评论!' }]">
          <n-input
            v-model:value="model.comment"
            clearable
            :maxlength="300"
            show-count
            type="textarea"
            :autosize="{
              maxRows: 3,
            }"
            :disabled="disabled"
          />
        </n-form-item>
      </n-form>
      <n-flex justify="end">
        <n-button @click="emits('hide')">取消</n-button>
        <n-button
          color="#0A56D8FF"
          :disabled="disabled"
          :loading="state.submitFlag"
          @click="methods.onValidate"
        >
          确定
        </n-button>
      </n-flex>
    </div>
  </div>
</template>
<script setup lang="jsx">
import * as taskProjectApi from '@/api/taskProject'
defineOptions({ name: 'TaskComment' })
const props = defineProps({
  exeId: {
    type: String,
    default: '',
  },
  disabled: {
    type: Boolean,
    default: false,
  },
})
const emits = defineEmits('hide')
const $form = ref(null)
const model = ref({
  comment: null,
})
const state = reactive({
  list: [],
  loadingFlag: true,
  submitFlag: false,
})
const methods = reactive({
  async getList() {
    state.loadingFlag = true
    const res = await taskProjectApi.commentList({ projectExeId: props.exeId })
    state.list = res.data
    state.loadingFlag = false
  },
  onValidate(e) {
    e.preventDefault()
    $form.value.validate(async (errors) => {
      if (!errors) {
        state.submitFlag = true
        await taskProjectApi.commentAdd({ ...model.value, projectExeId: props.exeId })
        model.value.comment = null
        await methods.getList()
        state.submitFlag = false
      }
    })
  },
})
watch(
  () => props.exeId,
  () => {
    methods.getList()
  },
  {
    immediate: true,
  }
)
</script>
<style lang="scss" scoped></style>
